<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滑块</title>
    <link rel="stylesheet" href="./view/滑块/styles.css">
</head>
<body>
<!-- 滑块 Unnamed (Rectangle) -->
<div id="u4779" class="ax_default heading_1">
    <div id="u4779_div" class=""></div>
    <div id="u4779_text" class="text ">
        <p><span>Slider 滑块</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u4780" class="ax_default heading_1">
    <div id="u4780_div" class=""></div>
    <div id="u4780_text" class="text ">
        <p><span>概述</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u4781" class="ax_default label">
    <div id="u4781_div" class=""></div>
    <div id="u4781_text" class="text ">
        <p><span>滑动输入器，用于在数值区间/自定义区间内进行选择，支持连续或离散值。</span></p>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u4782" class="ax_default" data-left="230" data-top="427" data-width="760" data-height="12">

    <!-- line-bg (Rectangle) -->
    <div id="u4783" class="ax_default box_1" data-label="line-bg">
        <div id="u4783_div" class=""></div>
        <div id="u4783_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- line (Rectangle) -->
    <div id="u4784" class="ax_default box_1" data-label="line">
        <div id="u4784_div" class=""></div>
        <div id="u4784_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- dot (Dynamic Panel) -->
    <div id="u4785" class="ax_default" data-label="dot">
        <div id="u4785_state0" class="panel_state" data-label="State1" style="">
            <div id="u4785_state0_content" class="panel_state_content">

                <!-- Unnamed (Ellipse) -->
                <div id="u4786" class="ax_default ellipse">
                    <img id="u4786_img" class="img " src="assets/images/滑块/u4786.svg"/>
                    <div id="u4786_text" class="text " style="display:none; visibility: hidden">
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u4787" class="ax_default label">
    <div id="u4787_div" class=""></div>
    <div id="u4787_text" class="text ">
        <p><span>基础样式</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u4788" class="ax_default label">
    <div id="u4788_div" class=""></div>
    <div id="u4788_text" class="text ">
        <p><span>基于动态面板的Ondrag事件进行实现，Ondrag事件绑定在圆圈上；</span></p><p><span>注意：如果要更改滑块的长度，则必须更改Ondrag事件上的move上指定的boundary。</span></p><p><span>动效版本还有BUG，实现过程涉及到变量，对交互要求不高的原型可以只使用样式，不使用动效。</span></p>
    </div>
</div>

<!-- Unnamed (Dynamic Panel) -->
<div id="u4789" class="ax_default">
    <div id="u4789_state0" class="panel_state" data-label="State1" style="">
        <div id="u4789_state0_content" class="panel_state_content">

            <!-- line-bg (Rectangle) -->
            <div id="u4790" class="ax_default box_1" data-label="line-bg">
                <div id="u4790_div" class=""></div>
                <div id="u4790_text" class="text " style="display:none; visibility: hidden">
                    <p></p>
                </div>
            </div>

            <!-- line (Rectangle) -->
            <div id="u4791" class="ax_default box_1" data-label="line">
                <div id="u4791_div" class=""></div>
                <div id="u4791_text" class="text " style="display:none; visibility: hidden">
                    <p></p>
                </div>
            </div>

            <!-- rightdot (Dynamic Panel) -->
            <div id="u4792" class="ax_default" data-label="rightdot">
                <div id="u4792_state0" class="panel_state" data-label="State1" style="">
                    <div id="u4792_state0_content" class="panel_state_content">

                        <!-- Unnamed (Ellipse) -->
                        <div id="u4793" class="ax_default ellipse">
                            <img id="u4793_img" class="img " src="assets/images/滑块/u4786.svg"/>
                            <div id="u4793_text" class="text " style="display:none; visibility: hidden">
                                <p></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- leftdot (Dynamic Panel) -->
            <div id="u4794" class="ax_default" data-label="leftdot">
                <div id="u4794_state0" class="panel_state" data-label="State1" style="">
                    <div id="u4794_state0_content" class="panel_state_content">

                        <!-- Unnamed (Ellipse) -->
                        <div id="u4795" class="ax_default ellipse">
                            <img id="u4795_img" class="img " src="assets/images/滑块/u4786.svg"/>
                            <div id="u4795_text" class="text " style="display:none; visibility: hidden">
                                <p></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u4796" class="ax_default label">
    <div id="u4796_div" class=""></div>
    <div id="u4796_text" class="text ">
        <p><span>动效版本</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u4797" class="ax_default label">
    <div id="u4797_div" class=""></div>
    <div id="u4797_text" class="text ">
        <p><span>&#149; 静态版本</span></p>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u4798" class="ax_default" data-left="230" data-top="522" data-width="760" data-height="12">

    <!-- line-bg (Rectangle) -->
    <div id="u4799" class="ax_default box_1" data-label="line-bg">
        <div id="u4799_div" class=""></div>
        <div id="u4799_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- line (Rectangle) -->
    <div id="u4800" class="ax_default box_1" data-label="line">
        <div id="u4800_div" class=""></div>
        <div id="u4800_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Ellipse) -->
    <div id="u4801" class="ax_default ellipse">
        <img id="u4801_img" class="img " src="assets/images/滑块/u4786.svg"/>
        <div id="u4801_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>
</div>

<!-- line-bg (Rectangle) -->
<div id="u4802" class="ax_default box_1" data-label="line-bg">
    <div id="u4802_div" class=""></div>
    <div id="u4802_text" class="text " style="display:none; visibility: hidden">
        <p></p>
    </div>
</div>

<!-- line (Rectangle) -->
<div id="u4803" class="ax_default box_1" data-label="line">
    <div id="u4803_div" class=""></div>
    <div id="u4803_text" class="text " style="display:none; visibility: hidden">
        <p></p>
    </div>
</div>

<!-- Unnamed (Ellipse) -->
<div id="u4804" class="ax_default ellipse">
    <img id="u4804_img" class="img " src="assets/images/滑块/u4786.svg"/>
    <div id="u4804_text" class="text " style="display:none; visibility: hidden">
        <p></p>
    </div>
</div>

<!-- Unnamed (Ellipse) -->
<div id="u4805" class="ax_default ellipse">
    <img id="u4805_img" class="img " src="assets/images/滑块/u4786.svg"/>
    <div id="u4805_text" class="text " style="display:none; visibility: hidden">
        <p></p>
    </div>
</div>

<!-- line-bg (Rectangle) -->
<div id="u4806" class="ax_default box_1" data-label="line-bg">
    <div id="u4806_div" class=""></div>
    <div id="u4806_text" class="text " style="display:none; visibility: hidden">
        <p></p>
    </div>
</div>

<!-- Unnamed (Ellipse) -->
<div id="u4807" class="ax_default ellipse">
    <img id="u4807_img" class="img " src="assets/images/滑块/u4807.svg"/>
    <div id="u4807_text" class="text " style="display:none; visibility: hidden">
        <p></p>
    </div>
</div>

<!-- Unnamed (Ellipse) -->
<div id="u4808" class="ax_default ellipse">
    <img id="u4808_img" class="img " src="assets/images/滑块/u4807.svg"/>
    <div id="u4808_text" class="text " style="display:none; visibility: hidden">
        <p></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u4809" class="ax_default label">
    <div id="u4809_div" class=""></div>
    <div id="u4809_text" class="text ">
        <p><span>&#149; 显示间断点</span></p><p><span>间断点移动有10个点，在左右两端各有两个隐形的点，将左右两点对齐两端后，选中所有的点后使用水平分布，就可以将所有点自动放到正确的位置。</span></p>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u4810" class="ax_default" data-left="230" data-top="679" data-width="760" data-height="12">

    <!-- line-bg (Rectangle) -->
    <div id="u4811" class="ax_default box_1" data-label="line-bg">
        <div id="u4811_div" class=""></div>
        <div id="u4811_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Group) -->
    <div id="u4812" class="ax_default" data-left="230" data-top="683" data-width="760" data-height="4">

        <!-- line-bg (Rectangle) -->
        <div id="u4813" class="ax_default box_1" data-label="line-bg">
            <div id="u4813_div" class=""></div>
            <div id="u4813_text" class="text " style="display:none; visibility: hidden">
                <p></p>
            </div>
        </div>

        <!-- line-bg (Rectangle) -->
        <div id="u4814" class="ax_default box_1" data-label="line-bg">
            <div id="u4814_div" class=""></div>
            <div id="u4814_text" class="text " style="display:none; visibility: hidden">
                <p></p>
            </div>
        </div>

        <!-- line-bg (Rectangle) -->
        <div id="u4815" class="ax_default box_1" data-label="line-bg">
            <div id="u4815_div" class=""></div>
            <div id="u4815_text" class="text " style="display:none; visibility: hidden">
                <p></p>
            </div>
        </div>

        <!-- line-bg (Rectangle) -->
        <div id="u4816" class="ax_default box_1" data-label="line-bg">
            <div id="u4816_div" class=""></div>
            <div id="u4816_text" class="text " style="display:none; visibility: hidden">
                <p></p>
            </div>
        </div>

        <!-- line-bg (Rectangle) -->
        <div id="u4817" class="ax_default box_1" data-label="line-bg">
            <div id="u4817_div" class=""></div>
            <div id="u4817_text" class="text " style="display:none; visibility: hidden">
                <p></p>
            </div>
        </div>

        <!-- line-bg (Rectangle) -->
        <div id="u4818" class="ax_default box_1" data-label="line-bg">
            <div id="u4818_div" class=""></div>
            <div id="u4818_text" class="text " style="display:none; visibility: hidden">
                <p></p>
            </div>
        </div>

        <!-- line-bg (Rectangle) -->
        <div id="u4819" class="ax_default box_1" data-label="line-bg">
            <div id="u4819_div" class=""></div>
            <div id="u4819_text" class="text " style="display:none; visibility: hidden">
                <p></p>
            </div>
        </div>

        <!-- line-bg (Rectangle) -->
        <div id="u4820" class="ax_default box_1" data-label="line-bg">
            <div id="u4820_div" class=""></div>
            <div id="u4820_text" class="text " style="display:none; visibility: hidden">
                <p></p>
            </div>
        </div>

        <!-- line-bg (Rectangle) -->
        <div id="u4821" class="ax_default box_1" data-label="line-bg">
            <div id="u4821_div" class=""></div>
            <div id="u4821_text" class="text " style="display:none; visibility: hidden">
                <p></p>
            </div>
        </div>

        <!-- line-bg (Rectangle) -->
        <div id="u4822" class="ax_default box_1" data-label="line-bg">
            <div id="u4822_div" class=""></div>
            <div id="u4822_text" class="text " style="display:none; visibility: hidden">
                <p></p>
            </div>
        </div>
    </div>

    <!-- line (Rectangle) -->
    <div id="u4823" class="ax_default box_1" data-label="line">
        <div id="u4823_div" class=""></div>
        <div id="u4823_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Ellipse) -->
    <div id="u4824" class="ax_default ellipse">
        <img id="u4824_img" class="img " src="assets/images/滑块/u4786.svg"/>
        <div id="u4824_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>
</div>

<!-- line-bg (Rectangle) -->
<div id="u4825" class="ax_default box_1" data-label="line-bg">
    <div id="u4825_div" class=""></div>
    <div id="u4825_text" class="text " style="display:none; visibility: hidden">
        <p></p>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u4826" class="ax_default" data-left="230" data-top="707" data-width="760" data-height="4">

    <!-- line-bg (Rectangle) -->
    <div id="u4827" class="ax_default box_1" data-label="line-bg">
        <div id="u4827_div" class=""></div>
        <div id="u4827_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- line-bg (Rectangle) -->
    <div id="u4828" class="ax_default box_1" data-label="line-bg">
        <div id="u4828_div" class=""></div>
        <div id="u4828_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- line-bg (Rectangle) -->
    <div id="u4829" class="ax_default box_1" data-label="line-bg">
        <div id="u4829_div" class=""></div>
        <div id="u4829_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- line-bg (Rectangle) -->
    <div id="u4830" class="ax_default box_1" data-label="line-bg">
        <div id="u4830_div" class=""></div>
        <div id="u4830_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- line-bg (Rectangle) -->
    <div id="u4831" class="ax_default box_1" data-label="line-bg">
        <div id="u4831_div" class=""></div>
        <div id="u4831_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- line-bg (Rectangle) -->
    <div id="u4832" class="ax_default box_1" data-label="line-bg">
        <div id="u4832_div" class=""></div>
        <div id="u4832_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- line-bg (Rectangle) -->
    <div id="u4833" class="ax_default box_1" data-label="line-bg">
        <div id="u4833_div" class=""></div>
        <div id="u4833_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- line-bg (Rectangle) -->
    <div id="u4834" class="ax_default box_1" data-label="line-bg">
        <div id="u4834_div" class=""></div>
        <div id="u4834_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- line-bg (Rectangle) -->
    <div id="u4835" class="ax_default box_1" data-label="line-bg">
        <div id="u4835_div" class=""></div>
        <div id="u4835_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- line-bg (Rectangle) -->
    <div id="u4836" class="ax_default box_1" data-label="line-bg">
        <div id="u4836_div" class=""></div>
        <div id="u4836_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>
</div>

<!-- line (Rectangle) -->
<div id="u4837" class="ax_default box_1" data-label="line">
    <div id="u4837_div" class=""></div>
    <div id="u4837_text" class="text " style="display:none; visibility: hidden">
        <p></p>
    </div>
</div>

<!-- Unnamed (Ellipse) -->
<div id="u4838" class="ax_default ellipse">
    <img id="u4838_img" class="img " src="assets/images/滑块/u4786.svg"/>
    <div id="u4838_text" class="text " style="display:none; visibility: hidden">
        <p></p>
    </div>
</div>

<!-- Unnamed (Ellipse) -->
<div id="u4839" class="ax_default ellipse">
    <img id="u4839_img" class="img " src="assets/images/滑块/u4786.svg"/>
    <div id="u4839_text" class="text " style="display:none; visibility: hidden">
        <p></p>
    </div>
</div>

<!-- line-bg (Rectangle) -->
<div id="u4840" class="ax_default box_1" data-label="line-bg">
    <div id="u4840_div" class=""></div>
    <div id="u4840_text" class="text " style="display:none; visibility: hidden">
        <p></p>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u4841" class="ax_default" data-left="230" data-top="736" data-width="760" data-height="4">

    <!-- line-bg (Rectangle) -->
    <div id="u4842" class="ax_default box_1" data-label="line-bg">
        <div id="u4842_div" class=""></div>
        <div id="u4842_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- line-bg (Rectangle) -->
    <div id="u4843" class="ax_default box_1" data-label="line-bg">
        <div id="u4843_div" class=""></div>
        <div id="u4843_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- line-bg (Rectangle) -->
    <div id="u4844" class="ax_default box_1" data-label="line-bg">
        <div id="u4844_div" class=""></div>
        <div id="u4844_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- line-bg (Rectangle) -->
    <div id="u4845" class="ax_default box_1" data-label="line-bg">
        <div id="u4845_div" class=""></div>
        <div id="u4845_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- line-bg (Rectangle) -->
    <div id="u4846" class="ax_default box_1" data-label="line-bg">
        <div id="u4846_div" class=""></div>
        <div id="u4846_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- line-bg (Rectangle) -->
    <div id="u4847" class="ax_default box_1" data-label="line-bg">
        <div id="u4847_div" class=""></div>
        <div id="u4847_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- line-bg (Rectangle) -->
    <div id="u4848" class="ax_default box_1" data-label="line-bg">
        <div id="u4848_div" class=""></div>
        <div id="u4848_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- line-bg (Rectangle) -->
    <div id="u4849" class="ax_default box_1" data-label="line-bg">
        <div id="u4849_div" class=""></div>
        <div id="u4849_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- line-bg (Rectangle) -->
    <div id="u4850" class="ax_default box_1" data-label="line-bg">
        <div id="u4850_div" class=""></div>
        <div id="u4850_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- line-bg (Rectangle) -->
    <div id="u4851" class="ax_default box_1" data-label="line-bg">
        <div id="u4851_div" class=""></div>
        <div id="u4851_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>
</body>
</html>
